<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" size="960px" class="demand_box" @close="resetForm()">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">添加素材</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="seach_mt flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <el-input style="width:216px" clearable size="small" placeholder="素材名称" suffix-icon="el-icon-search" @change="getDataList(1)" v-model="queryInfo.query">
                    </el-input>
                    <el-date-picker style="width:260px;margin-left:12px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="flexbox flexcenter">
                    <div class="flexbox flexcenter drop_box">
                        <span class="drop_title">上传时间</span>
                    </div>
                    <div class="icon_btn icon_btn_32" style="margin-left:10px" @click="sortFun('desn')" v-if="queryInfo.order==''|| queryInfo.order=='asc'"><img src="../../assets/img/rank_icon.svg" alt=""></div>
                    <div class="icon_btn icon_btn_32 rote_180" style="margin-left:10px" @click="sortFun('asc')" v-else><img src="../../assets/img/rank_icon.svg" alt=""></div>
                </div>
            </div>
            <div class="demand_center flexbox flex" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <div class="person_left">
                    <div class="flexbox flexcolumn height_100">
                        <!-- <div class="person_header" style="height:59px">
                            <ul class="per_tab flexbox">
                                <li :class="{active:currActive==1}" @click="changeCatalogue(1)">千川</li>
                                <li :class="{active:currActive==2}" @click="changeCatalogue(2)">UD</li>
                            </ul>
                        </div> -->
                        <div class="mat_head">目录</div>
                        <div class="person_job flex1">
                            <div class="person_btn">
                                <el-input placeholder="请输入目录搜索" clearable prefix-icon="el-icon-search" v-model="catalogQuery">
                                </el-input>
                            </div>
                            <el-tree ref="tree" accordion :expand-on-click-node='true' :data="filteredData(catalogQuery,catalogData)" highlight-current :current-node-key="currentNodekey" @node-click="getTreeData" class="part_tree" node-key="id" :props="defaultProps">
                                <div class="flexbox flexcenter flexbetween custom-tree-node" slot-scope="{ node, data }">
                                    <div class="part_left flexbox flexcenter">
                                        <img src="../../assets/img/tree_icon.svg" alt="" class="tree_icon">
                                        <span class="tree_title">{{node.label}}</span>
                                    </div>
                                </div>
                            </el-tree>
                        </div>
                    </div>
                </div>
                <div class="person_right flex flexbox flexcolumn">
                    <div class="mat_head">素材列表</div>
                    <div class="material_content over_box flex" v-infinite-scroll="load" :infinite-scroll-disabled="isload">
                        <div class="material_item" v-for="(item,index) in tableData" :key="index">
                            <div class="material_img">
                                <el-checkbox v-model="item.checked" class="ma_check" @change="checkVedio(item)" :disabled="hasCheck.length>=1"></el-checkbox>
                                <el-carousel height="160px" :autoplay='false' trigger="click" class="picture_carousel" @change="((val)=>{changePicture(val, index)})">
                                    <el-carousel-item v-for="(img,index) in item.material" :key="index">
                                        <div class="material_img flexbox flexcenter flexjust">
                                            <img :src="img.url" alt="" class="material_img_big">
                                            <img :src="img.url" alt="" class="material_img_small">
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div class="material_info">
                                <div class="material_t">
                                    <!-- <div class="material_t_name">{{item.material_name}}</div> -->
                                    <el-tooltip content="" placement="top">
                                        <div slot="content" class="flexbox flexcenter font_14">
                                            核心创意人：{{item.centre_name}}
                                            <span class="mt_line"></span>
                                            平面：{{item.designer_name}}
                                        </div>
                                        <div class="material_t_name">{{item.material_name}}</div>
                                    </el-tooltip>
                                    <div class="material_t_time">{{item.create_time}}</div>
                                </div>
                                <!-- <div class="material_c">
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">消耗</span>
                                        <span class="material_c_text2">{{item.cost}}</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">展示</span>
                                        <span class="material_c_text2">{{item.show}}</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">点击率</span>
                                        <span class="material_c_text2">{{item.click_rate}}%</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">支付ROI</span>
                                        <span class="material_c_text2">{{item.roi}}</span>
                                    </div>
                                </div> -->
                                <!-- <div class="material_b flexbox flexcenter flexbetween">
                                    <el-button plain size="mini" style="width:100%" @click="playVideo(item.material)">
                                        <div class="flexbox flexcenter flexjust">
                                            <svg width="16" height="16" viewBox="0 0 16 16" stroke='#616C85' fill="none" xmlns="http://www.w3.org/2000/svg" class="stroke_svg btn_svg">
                                                <path d="M5.46533 8V3.5L8.96533 5.75L12.4653 8L8.96533 10.25L5.46533 12.5V8Z" stroke="inherit" stroke-width="1.2" stroke-linejoin="round" />
                                            </svg>
                                            播放
                                        </div>
                                    </el-button>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mat_footer flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="has_text">
                        已选：<span class="text_red">{{hasCheck.length}}</span>/1
                    </div>
                    <div class="has_mat" v-for="(item,index) in hasCheck" :key="index">
                        <img src="../../assets/img/mar_close.png" alt="" class="mar_close" @click="deletCheck(index,item)">
                        <img :src="item.material.img_url" alt="" class="has_img material_img_small">
                    </div>
                </div>
                <div>
                    <el-button plain size="small" class="el-button-width" @click="resetForm()">取 消</el-button>
                    <el-button type="primary" size="small" class="el-button-width" @click="submitForm()">保 存</el-button>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            currActive: 1,
            loading: false,
            dialogVisible: false,
            max_length: null,
            change: null,
            isload: false,
            catalogData: [], //目录列表
            tableData:[],
            currentNodekey: 0, //默认选中的节点树
            catalogQuery: "",
            hasCheck: [],
            queryInfo: {
                page: 1,
                limit: 10,
                query: "",
                date: [],
                cate_id: "",
                field: "create_time",
                order: "",
                channel: 1,
            },

            catalogueInfo: {
                channel: 1,
                soure_type: 1,
            },

            defaultProps: {
                children: "next",
                label: "name",
            },
        };
    },
    created() {
        this.$bus.on("editPicture", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.index = value.index;
            this.change = value.change;
            this.getCatalogueList();
            this.getDataList();
        });
    },
    beforeDestroy() {
        this.$bus.off("editPicture");
    },
    methods: {
        // tab切换
        changeCatalogue(index) {
            this.currActive = index;
            this.catalogueInfo.channel = index;
            this.queryInfo.cate_id = "";
            this.queryInfo.channel = index;
            this.getCatalogueList();
            this.getDataList();
        },

        // 树形节点点击
        getTreeData(data) {
            if (data.next.length == 0) {
                this.tableData = []
                this.queryInfo.cate_id = data.id;
                this.queryInfo.order = ''
                this.queryInfo.page = 1;
                this.getDataList();
            }
        },


        // 排序
        sortFun(val) {
            this.queryInfo.order = val;
            this.queryInfo.page = 1;
            this.getDataList();
        },

        //获取目录列表
        async getCatalogueList() {
            const { data: res } = await this.$http.post(
                "adminapi/material/catalog",
                this.catalogueInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                let arrText = {
                    brand_id: "",
                    name: "全部",
                    next: [],
                };
                res.data.unshift(arrText);
                this.catalogData = res.data;
            }
        },

        //获取数据列表
        async getDataList() {
            this.loading = true;
            this.isload = true;
            const { data: res } = await this.$http.post(
                "adminapi/material/pictureList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.isload = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.isload = false;
                let list = res.data.list;
                this.total = res.data.count;
                list.map((item) => {
                    item.checked = false;
                    return item;
                });
                for (let i in list) {
                    list[i].p_index = 0
                    for (let a in this.hasCheck) {
                        if (list[i].id == this.hasCheck[a].material.id) {
                            list[i].checked = true;
                        }
                    }
                }
                if (this.queryInfo.page == 1) {
                    this.tableData = list;
                } else {
                    this.tableData = this.tableData.concat(list);
                }
            }
        },

        // 下拉加载更多
        load() {
            if (this.tableData.length == this.total) {
                this.isload = true;
                this.queryInfo.page = 1;
            } else {
                this.queryInfo.page += 1;
                this.getDataList();
            }
        },

        changePicture(e,index){
            this.tableData[index].p_index = e
        },

        // 选择图片
        checkVedio(item) {
            this.$forceUpdate();
            if (item.checked) {
                this.hasCheck.push({
                    material: {
                        id: item.id,
                        sch_id: item.sch_id,
                        channel: item.channel,
                        cate_type: 'img',
                        cate_id: item.cate_id,
                        material: item.material[item.p_index],
                        img_url: item.material[item.p_index].url,
                        material_name: item.material_name,
                        file_format: item.file_format,
                        duration: item.duration,
                        width: item.width,
                        height: item.height,
                        material_id: item.material_id,
                        cost: item.cost,
                        show: item.show,
                        click_rate: item.click_rate,
                        roi: item.roi,
                        create_time: item.create_time,
                        create_user_id: item.create_user_id,
                        reject: item.reject,
                        reject_reason: item.reject_reason,
                        click_cnt: item.click_cnt,
                        checked: item.checked,
                        material_source:'LOCAL',
                        image_mode:item.width/item.height==0.5625?'竖版图片':'横版图片'
                    },
                });
            } else {
                let index = this.hasCheck.findIndex(
                    (val) => val.material.id == item.id
                );
                this.hasCheck.splice(index, 1);
            }
        },

        // 删除已选视频
        deletCheck(index, item) {
            this.hasCheck.splice(index, 1);
            let num = this.tableData.findIndex(
                (val) => val.id == item.material.id
            );
            if (num != -1) {
                this.tableData[num].checked = false;
            }
        },

        // 目录筛选
        filteredData(query, list) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.name.indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        submitForm() {
            if (this.change) {
                if (this.hasCheck.length > 0) {
                    let arr = {
                        img_url:this.hasCheck[0].material.img_url,
                        img_name:this.hasCheck[0].material.material_name
                    }
                    this.$bus.emit("changePicture", arr);
                } else {
                    this.$message.error('请选择图片！');
                    return;
                }
            } else {
                if (this.hasCheck.length > 0) {
                    this.$parent.createform.creatinfo.creative[
                        this.index
                    ].material.img_url = this.hasCheck[0].material.img_url;
                    this.$parent.createform.creatinfo.creative[
                        this.index
                    ].material.material_name = this.hasCheck[0].material.material_name;
                } else {
                    this.$message.error('请选择图片！');
                    return;
                }
            }
            this.$parent.sessionSave()
            this.resetForm();
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
            this.hasCheck = [];
            this.queryInfo.query = "";
            this.queryInfo.date = [];
            this.queryInfo.order = "";
            this.queryInfo.cate_id = "";
            this.queryInfo.field = "create_time";
            this.tableData = []
        },
    },
    components: {},
};
</script>

<style scoped>
.seach_mt {
    height: 72px;
    padding: 0 20px;
}
.demand_center {
    padding: 0;
    margin: 0 20px;
    border: 1px solid #ebebeb;
}
.mat_head {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 20px;
    font-size: 14px;
    color: #17233d;
}
.person_left {
    width: 292px;
    flex-shrink: 0;
    border-right: 1px solid #ebebeb;
}
.person_right {
    flex: 1;
    overflow: auto;
}

.person_header {
    padding: 0 20px;
    height: 59px;
    border-bottom: 1px solid #ebebeb;
}
.person_title {
    font-size: 16px;
    font-weight: bold;
}

.person_center {
    padding: 20px 20px 0;
    overflow-y: auto;
}

.person_job {
    overflow-y: auto;
}

.per_tab {
    justify-content: center;
}
.per_tab li {
    height: 59px;
    line-height: 59px;
    padding: 0 20px;
    position: relative;
    font-size: 16px;
    color: #616c85;
    cursor: pointer;
}
.per_tab li::after {
    transform: scaleX(0);
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    border-top: 2px solid #4475ff;
    transition: all 0.3s;
}
.per_tab li.active {
    color: #17233d;
}
.per_tab li.active::after {
    transform: scaleX(1);
}

.person_btn {
    padding: 20px;
}
.custom-tree-node {
    height: 48px;
}
.tree_title {
    font-size: 14px;
    color: #17233d;
    margin-left: 10px;
}
.part_right {
    position: absolute;
    right: 10px;
    display: none;
}
.mt_head {
    height: 59px;
    padding: 0 20px;
}
.mt_border {
    border-bottom: 1px solid #ebebeb;
}
.mat_footer {
    height: 60px;
    padding: 0 20px;
}
.has_text {
    font-size: 14px;
    color: #b4b7bd;
}
.has_mat {
    position: relative;
    width: 28px;
    height: 40px;
    border-radius: 2px;
    margin-left: 16px;
}
.has_img {
    width: 28px;
    height: 40px;
}
.mar_close {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 3;
    cursor: pointer;
}
</style>

<style>
.part_tree .el-tree-node__content {
    height: 48px;
    position: relative;
}
.part_tree .el-tree-node__expand-icon {
    color: #17233d;
    margin-left: 15px;
}
.part_tree .el-tree-node__expand-icon.is-leaf {
    color: transparent;
}
.part_tree .el-tree-node__content:hover {
    background-color: #f6f8ff;
}
.ma_check {
    position: absolute !important;
    z-index: 3;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
.ma_check .el-checkbox__inner {
    width: 18px;
    height: 18px;
}
.ma_check .el-checkbox__inner::after {
    top: 3px;
    left: 6px;
}
</style>


